<template>
  <DetailBox :title="getRouteTitle()" :border="2">
    <template #center>
      <slot name="center">
        <div style="width:1200px; height: 430px;overflow: auto">
          <ContentBox :title="'表格'" :border="1" :width="1150" :marginHeight="300">
            <template #center>
              <slot name="center">
                <div class="drag-table">
                  <el-table :data="article" :stripe="true">
                    <el-table-column prop="id" label="文章ID" width="80" align="center"></el-table-column>
                    <el-table-column prop="created_at" label="创建时间" width="200" align="center"></el-table-column>
                    <el-table-column prop="title" label="标题" align="center"></el-table-column>
                    <el-table-column prop="author" label="作者" width="200" align="center"></el-table-column>
                    <el-table-column prop="pageviews" label="阅读量" width="100" align="center"></el-table-column>
                    <el-table-column prop="type" label="类别" width="100" align="center"></el-table-column>
                    <el-table-column prop="status" label="状态" width="100" align="center">
                      <template #default="scope">
                        <el-tag :type="scope.row.status === 'published' ? 'success' : 'info'">{{
                            scope.row.status
                          }}
                        </el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150" align="center">
                      <template #default>
                        <el-icon class="drag" style="font-size: 20px; cursor: pointer">
                          <component :is="'Drag'"></component>
                        </el-icon>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="sort">
                    <div>
                      <el-tag>默认顺序</el-tag>
                      <span>[{{ oldIndexArr.toString() }}]</span>
                    </div>
                    <div>
                      <el-tag>拖拽顺序</el-tag>
                      <span>[{{ newIndexArr.toString() }}]</span>
                    </div>
                  </div>
                </div>

              </slot>
            </template>
          </ContentBox>
        </div>
      </slot>
    </template>
  </DetailBox>
</template>
<script lang="ts" setup>
import {ref, onMounted, nextTick} from 'vue'
// import { getArticleList } from '@/api/article'
import {IArticleList} from '@/utils/interface'
import Sortable from 'sortablejs'
import DetailBox from "@/views/components/DetailBox.vue";
import ContentBox from "@/views/components/ContentBox.vue";
import {getRouteTitle} from "@/utils";

const article = ref<IArticleList[]>([])
let newIndexArr = ref<number[]>([])
const oldIndexArr: number[] = []

/**
 * @desc: 获取文章列表
 */
const getArticleList = (d: any) => {
  return {
    data: {
      code: 10000,
      data: {
        items: [
          {
            id: 1111,
            created_at: 1111,
            title: 1111,
            author: 1111,
            pageviews: 1111,
            type: 1111,
            status: 1111,
          },
          {
            id: 22,
            created_at: 22,
            title: 2,
            author: 2,
            pageviews: 2,
            type: 2,
            status: 2,
          },
        ]
      }
    }
  }
}
const handleGetArticleList = async () => {
  const res = await getArticleList({limit: 10})
  const {code, data} = res.data
  if (code === 10000) {
    article.value = data.items
    for (let i = 0, len = article.value.length; i < len; i++) {
      oldIndexArr.push(article.value[i].id)
    }
    newIndexArr.value = oldIndexArr
  }
}

/**
 * @desc: 添加拖拽表格
 */
const initDrapTable = () => {
  const tbody = document.querySelectorAll('.drag-table .el-table__body-wrapper table > tbody')[0] as unknown as HTMLElement
  Sortable.create(tbody, {
    animation: 100,
    onEnd(evt) {
      let newArr = article.value
      let oldIndex = evt.oldIndex || 0
      let newIndex = evt.newIndex || 0
      const currentRow = newArr.splice(oldIndex, 1)[0]
      newArr.splice(newIndex, 0, currentRow)
      article.value = []
      nextTick(() => {
        article.value = newArr
        newIndexArr.value = []
        for (let i = 0, len = article.value.length; i < len; i++) {
          newIndexArr.value.push(article.value[i].id)
        }
      })
    }
  })
}
handleGetArticleList()
onMounted(() => {
  initDrapTable()
})
</script>
<style lang="scss">

</style>
